<template>
  <div  style="display: none;">
    <button @click="triggerUpload">上传文件</button>
    <!-- 隐藏的文件上传控件 -->
    <input type="file" ref="fileInput" @change="handleFileChange">
  </div>
</template>
<script>
import { uploadAction } from '@/api/manage'
export default {
  name: 'UploadFiles',
  data() {
    return {
      target: '',
      uploadLoading: false
    }
  },
  methods: {
    // 触发上传操作
    triggerUpload(target) {
      this.target = target
      this.$refs.fileInput.click();
    },
    // 处理文件选择
    handleFileChange(event) {
      if (this.uploadLoading) {
        return
      }
      const file = event.target.files[0];
      // 判断数据是否超过200M
      if (file.size > 209715200) {
        this.$message.warning('请上传 200MB 以内的文件')
        return
      }
      // const pattern = /^[^s~`!@#$%^&*()_+=<>?:"{}|,\/\\[\]··]+$/;
      // // 判断文件名不允许有空格和特殊字符
      // if (pattern.test(file.name)) {
      //   this.$message.warning('文件名称包含空格或特殊字符，请重新选择文件上传！')
      //   return
      // }
      const reg = new RegExp(/\s/)
      if (reg.test(file.name)) {
        this.$message.warning('文件名称包含空格，请重新选择文件上传！');
        return false;
      }
      const data  = new FormData();
      //使用append存储信息，append('键名','键值')
      data.append('upload',file);  
      data.append('upload_fullpath',file.name);
      data.append('action','upload');
      data.append('target',this.target);
      // 可以在这里发送文件到服务器
      this.uploadLoading = true
      this.$message.loading({content:'正在上传中...',key: 'loadingHide', duration: 0}); 
      uploadAction('/api/erp/oa/fileManager/upload', data).then(res => {
        if (res.success && res.result) {
          this.$message.success({content:'上传成功',key: 'loadingHide'})
          this.$emit('success')
        } else {
          this.$message.error({content:'上传失败，请重新上传',key: 'loadingHide'})
        }
      }).catch(() => {
        this.$message.warning({content:'服务器暂无响应，请稍后再尝试',key: 'loadingHide'})
      }).finally(() => {
        this.uploadLoading = false
      })
    }
  }
};
</script>
<style>
/* 添加额外的样式，如按钮样式等 */
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
}
</style>